<template>
  <div id="componentDocs">
    <docsHeader />
    <div class="docsMain" ref="docsMainDom">
      <div class="page_container">
        <div class="scrollbar">
          <div class="side_nav">
            <div class="title">组件列表</div>
            <div class="menu-item-group" v-for="item in docsList" :key="item.title">
              <div class="menu-item-group-title">{{item.title}}</div>
              <div
                :class="innerItem.path==currentPath?'subtitle subtitleAct':'subtitle'"
                v-for="innerItem in item.docsChildrenList"
                :key="innerItem.subtitle"
                @click="toDocsPath(innerItem.path)"
              >{{innerItem.subtitle}}</div>
            </div>
          </div>
        </div>
        <div class="component__content">
          <router-view></router-view>
        </div>
      </div>
      <div class="docs_link-content">
        <docsLink />
      </div>
    </div>
  </div>
</template>
<script>
import docsHeader from "../../components/docsHeader.vue";
import docsLink from "../../components/docLink.vue";
export default {
  name: "componentDocs",
  components: { docsHeader, docsLink },
  data() {
    return {
      docsList: [
        {
          title: "基本",
          docsChildrenList: [
            {
              subtitle: "Button - 按钮 ✨",
              path: "button",
            },
            {
              subtitle: "Icon - 图标",
              path: "icon",
            },
            {
              subtitle: "Link - 文字链接",
              path: "link",
            },
          ],
        },
        {
          title: "布局",
          docsChildrenList: [
            {
              subtitle: "Grid - 栅格 ✨",
              path: "grid",
            },
            {
              subtitle: "Layout - 布局",
              path: "layout",
            },
          ],
        },
        {
          title: "导航",
          docsChildrenList: [
            {
              subtitle: "Affix - 固钉",
              path: "affix",
            },
            {
              subtitle: "Tabs - 标签页 ✨",
              path: "tabs",
            },
            {
              subtitle: "Breadcrumb - 面包屑",
              path: "breadcrumb",
            },
            {
              subtitle: "Dropdown - 下拉菜单 ✨",
              path: "dropdown",
            },
            {
              subtitle: "Menu - 导航菜单",
              path: "affix",
            },
          ],
        },
        {
          title: "表单",
          docsChildrenList: [
            {
              subtitle: "Radio - 单选框",
              path: "radio",
            },
            {
              subtitle: "Checkbox - 多选框",
              path: "radio",
            },
            {
              subtitle: "Input - 输入框 ✨",
              path: "input",
            },
            {
              subtitle: "InputNumber - 计数器",
              path: "radio",
            },
            {
              subtitle: "Select - 下拉选择器",
              path: "select",
            },
            {
              subtitle: "Cascader - 级联选择器",
              path: "cascader",
            },
            {
              subtitle: "Switch - 开关",
              path: "switch",
            },
            {
              subtitle: "Slider - 滑块",
              path: "slider",
            },
            {
              subtitle: "TimePicker - 时间选择器 ✨",
              path: "timePicker",
            },
            {
              subtitle: "DatePicker - 日期选择器 ✨",
              path: "datePicker",
            },
            {
              subtitle: "Upload - 上传",
              path: "upload",
            },
            {
              subtitle: "Rate - 评分",
              path: "rate",
            },
            {
              subtitle: "Transfer - 穿梭框",
              path: "transfer",
            },
            {
              subtitle: "Form - 表单",
              path: "form",
            },
          ],
        },
        {
          title: "数据",
          docsChildrenList: [
            {
              subtitle: "Table - 表格",
              path: "table",
            },
            {
              subtitle: "Pagination - 分页",
              path: "pagination",
            },
            {
              subtitle: "Tag - 标签 ✨",
              path: "tag",
            },
            {
              subtitle: "Progress - 进度条",
              path: "progress",
            },
            {
              subtitle: "Tree - 树形控件",
              path: "tree",
            },
            {
              subtitle: "Badge - 标记",
              path: "badge",
            },
            {
              subtitle: "Skeleton - 骨架屏",
              path: "skeleton",
            },
            {
              subtitle: "Empty - 空状态",
              path: "empty",
            },
            {
              subtitle: "Descriptions - 描述列表",
              path: "descriptions",
            },
            {
              subtitle: "Result - 结果",
              path: "result",
            },
          ],
        },
        {
          title: "展示",
          docsChildrenList: [
            {
              subtitle: "Card - 卡片 ✨",
              path: "card",
            },
            {
              subtitle: "Modal - 模态框",
              path: "modal",
            },
            {
              subtitle: "Drawer - 抽屉",
              path: "drawer",
            },
            {
              subtitle: "Loading - 加载",
              path: "loading",
            },

            {
              subtitle: "Collapse - 折叠面板",
              path: "tabs",
            },
            {
              subtitle: "Tooltip - 文字提示 ✨",
              path: "tooltip",
            },
            {
              subtitle: "Timeline - 时间线",
              path: "timeline",
            },
            {
              subtitle: "Steps - 步骤条",
              path: "timeline",
            },
            {
              subtitle: "Border - 边框",
              path: "border",
            },
            {
              subtitle: "Divider - 分割线",
              path: "divider",
            },
            {
              subtitle: "Calendar - 日历",
              path: "calendar",
            },
            {
              subtitle: "Image - 图片",
              path: "calendar",
            },
          ],
        },
        {
          title: "通知",
          docsChildrenList: [
            {
              subtitle: "Alert - 警告提示 ✨",
              path: "alter",
            },
            {
              subtitle: "Message - 消息提示 ✨",
              path: "message",
            },
          ],
        },
        {
          title: "其他",
          docsChildrenList: [
            {
              subtitle: "Anchor - 锚点",
              path: "anchor",
            },
            {
              subtitle: "ScrollLoad - 滚动加载",
              path: "scrollLoad",
            },
            {
              subtitle: "BackTop - 回到顶部",
              path: "backTop",
            },
          ],
        },
      ],
    };
  },
  computed: {
    currentPath() {
      return this.$route.name;
    },
  },
  methods: {
    toDocsPath(pathName) {
      this.$router.push({
        path: "/zh-CN/component/" + pathName,
      });
      this.$refs.docsMainDom.scrollTop = 0;
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='scss'>
@import "../../styles/docs_main.scss";
#componentDocs {
  .docsMain {
    width: 100%;
    height: 90vh;
    overflow-y: auto;
    .menu-item-group {
      font-variant: tabular-nums;
      color: #000000d9;
      font-size: 14px;
      text-align: left;
      background: #fff;
      .menu-item-group-title {
        margin-top: 16px;
        margin-bottom: 26px;
        font-size: 13px;
        color: #00000073;
        line-height: 1.5715;
        transition: all 0.3s;
        &:after {
          position: relative;
          top: 12px;
          display: block;
          width: calc(100% - 20px);
          height: 1px;
          background: #f0f0f0;
          content: "";
        }
      }
    }
    .subtitleAct {
      border-right: 3px solid #1890ff;
      color: deepskyblue;
      background-color: #e6f7ff;
    }
  }
  .docs_link-content {
    position: fixed;
    right: 180px;
    top: 120px;
  }
}
</style>